<template>
    <div class="bigHigh_box">
        <div class="da">
            <b>{{ typeTitle }}详情</b>
            <span>{{ oneDone }}</span>
        </div>
        <div class="da_One">
            <div class="da_OneTop">
                <b>🏷基本信息</b>
                <table>
                    <tr>
                        <td>{{ arrayOne[0] }}</td>
                        <td>{{ arrayCont[0] }}</td>
                        <td>{{ arrayOne[1] }}</td>
                        <td>{{ arrayCont[1] }}</td>
                    </tr>
                    <tr>
                        <td>{{ arrayOne[2] }}</td>
                        <td>{{ arrayCont[2] }}</td>
                        <td>{{ arrayOne[3] }}</td>
                        <td>{{ arrayCont[3] }}</td>
                    </tr>
                    <tr>
                        <td>{{ arrayOne[4] }}</td>
                        <td>{{ arrayCont[4] }}</td>
                        <td>{{ arrayOne[5] }}</td>
                        <td>{{ arrayCont[5] }}</td>
                    </tr>
                    <tr>
                        <td>{{ arrayOne[6] }}</td>
                        <td>{{ arrayCont[6] }}</td>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
            <div>
                <b>🏷审批信息</b>
                <table>
                    <tr>
                        <td>{{ arrayTwo[0] }}</td>
                        <td>{{arraytwoCont[0]}}</td>
                        <td>{{ arrayTwo[1] }}</td>
                        <td>{{arraytwoCont[1]}}</td>
                    </tr>
                    <tr>
                        <td>{{ arrayTwo[2] }}</td>
                        <td>{{arraytwoCont[2]}}</td>
                        <td>{{ arrayTwo[3] }}</td>
                        <td>{{arraytwoCont[3]}}</td>
                    </tr>
                    <tr>
                        <td>{{ arrayTwo[4] }}</td>
                        <td>{{arraytwoCont[4]}}</td>
                        <td>{{ arrayTwo[5] }}</td>
                        <td>{{arraytwoCont[5]}}</td>
                    </tr>
                   
                </table>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { onMounted, ref } from 'vue';
import axios from 'axios';
let rou = useRoute().query.id
let typeTitle = useRoute().query.type
// 数据
let todolist = ref()
// 数据的状态
let oneDone = ref()
// 表格内容
let arrayOne = ref()
let arrayTwo = ref()
let arrayCont = ref<any[]>([])
let arraytwoCont = ref<any[]>([])
// 获取数据
let datalist = async () => {
    try {
        const response = await axios.post('http://localhost:3000/dailte', { id: `${rou}` ,type:`${typeTitle}`});
        if (response.data.code == 200) {
            todolist.value = response.data.data[0]
            getCont()
            if (todolist.value.done === "待审批"|| todolist.value.done === "未通过") {
                oneDone.value = '🔴' + todolist.value.done
            }
            if (todolist.value.done === "已通过" ) {
                oneDone.value = '🟢' + todolist.value.done

            }
        }
        // 判断数据类型设置格式


    } catch (error) {
        console.error('POST 请求失败:', error);
    }
}
// 获取数据
onMounted(() => {
    datalist()
});

if (typeTitle === '请假申请') {
    arrayOne.value = ['请假类型:', '请假天数:', '开始时间', '结束时间:', '请假原因:', '关联业务:', '附件下载:']
    arrayTwo.value=['提交人员:','审批状态:','审批人员:','通知他人:','提交时间','审批时间']
}
if(typeTitle==='出差申请'){
    arrayOne.value = ['出差天数:', '出差时间:', '出差地址:', '出差预算:', '出差原因:', '关联业务:', '附件下载:']
    arrayTwo.value=['提交人员:','审批状态:','审批人员:','通知他人:','提交时间','审批时间']
}
if(typeTitle==='借款申请'){
    arrayOne.value = ['借款金额:', '借款原因:', '关联业务:', '附件下载:']
    arrayTwo.value=['提交人员:','审批状态:','审批人员:','通知他人:','提交时间','审批时间']
}
if(typeTitle==='工作请示'){
    arrayOne.value = ['紧急状态:', '请示内容:', '关联业务:', '附件下载:']
    arrayTwo.value=['提交人员:','审批状态:','审批人员:','通知他人:','提交时间','审批时间']
}
if(typeTitle==='客户拜访'){
    arrayOne.value = ['拜访客户:', '拜访时间:', '拜访事由:','关联业务', '附件下载:']
    arrayTwo.value=['提交人员:','审批状态:','审批人员:','通知他人:','提交时间','审批时间']
}

let getCont = () => {
    if (typeTitle === '请假申请') {
        arrayCont.value = [todolist.value.type, todolist.value.dayLong, todolist.value.startTime, todolist.value.endTime, todolist.value.iSwhy, todolist.value.gl, "附件.pdf"]
        arraytwoCont.value = [todolist.value.oknum, todolist.value.done, "李小明", "李小明,陈晓红,曾小芳", todolist.value.tiTime, todolist.value.shenTime]
    }
    if(typeTitle==='出差申请'){
        arrayCont.value = [todolist.value.datas, todolist.value.oneTime, todolist.value.type, todolist.value.jinji, todolist.value.iSwhy, todolist.value.goOne, "附件.pdf"]
        arraytwoCont.value = [todolist.value.oknum, todolist.value.done, "李小明", "李小明,陈晓红,曾小芳", todolist.value.okTime, todolist.value.shenTime]
    }
    if(typeTitle==='借款申请'){
        arrayCont.value = [todolist.value.jinji, todolist.value.iSwhy,todolist.value.goOne, "附件.pdf"]
        arraytwoCont.value = [todolist.value.oknum, todolist.value.done, "李小明", "李小明,陈晓红,曾小芳", todolist.value.okTime, todolist.value.shenTime]
    }
    if(typeTitle==='工作请示'){
        arrayCont.value = [todolist.value.jinji, todolist.value.iSwhy,todolist.value.goOne, "附件.pdf"]
        arraytwoCont.value = [todolist.value.oknum, todolist.value.done, "李小明", "李小明,陈晓红,曾小芳", todolist.value.okTime, todolist.value.shenTime]
    }
    if(typeTitle==='客户拜访'){
        arrayCont.value = [todolist.value.kehu, todolist.value.okTime,todolist.value.iSwhy,todolist.value.goOne, "附件.pdf"]
        arraytwoCont.value = [todolist.value.nomberOne, todolist.value.done, "李小明", "李小明,陈晓红,曾小芳", todolist.value.tiTime, todolist.value.shenTime]
    }
}




</script>

<style scoped>
.da {
    height: 80px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    line-height: 80px;
    padding: 0 30px;
    color: #474747;
}

.da b {
    font-size: 20px;

}

.da span {
    font-size: 15px;
    margin-left: 20px;
}

.da_One {
    margin-bottom: 200px;
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding: 30px;
    box-sizing: border-box;
    color: #474747;
    margin-top: 15px;
    padding-bottom: 30px;
}

.da_OneTop {
    margin-bottom: 30px;
}

.da_One table {
    margin-top: 15px;
    border-width: 1px;
    /* 设置表格边框宽度为1像素 */
    border-style: solid;
    /* 设置表格边框样式为实线 */
    border-color: #eaeaea;
    /* 设置表格边框颜色为黑色 */
    width: 100%;
    border-collapse: collapse;
    /* 合并表格边框，使内边框和外边框无缝连接 */
    border-spacing: 0;
    /* 设置相邻单元格的间距为0，使得内边框和外边框之间没有空隙 */
}

.da_One table tr {
    border: 1px solid #eaeaea;
}

.da_One table td:nth-child(odd) {
    width: 150px;
    background-color: #f5f5f5;
    color: #666666;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid #eaeaea;
    font-weight: bold;
}

.da_One table td:nth-child(even) {
    padding-left: 15px;
    width: 420px;
}
</style>